import React from 'react'
import {Link} from 'react-router'
import QueueAnim from 'rc-queue-anim'
import PubSub from 'pubsub-js/src/pubsub'
import config from './../libs/config.js'

import '../styles/records.scss'

export default class records extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            headImg: '',
            userName: '',
            platform: '',
            userInfo: {},
            objAccount: {},
        }
    }

    componentDidMount() {
        var t = this;
        PubSub.publish('updateTitle','我的战绩')
        PubSub.publish('updateMenu','profile')
        t.setState({
            objAccount: JSON.parse(window.localStorage['account'])
        },function() {
            t.setState({
                headImg: t.state.objAccount.avatar,
                userName: t.state.objAccount.user,
                platform: t.state.objAccount.platform
            },function(){
                t.getRecordsInfo();
            })
        })
    }

    componentWillUnmount(){
        PubSub.publish('updateMenu','back')
    }

    getRecordsInfo() {
        var t = this;
        $.ajax({
            url: config.server_host + '/api/records',
            type: 'get',
            data: {
                platform: t.state.objAccount.platform,
                mobile: t.state.objAccount.user
            },
            success: function(data) {
                if (data.code === 200) {
                    t.setState({
                        userInfo: data.data
                    })
                }
            }
        })
    }

    loadMore = () => {
        // ajax获取更多数据
    }

    render() {
        const popContent = (
            <div>
                <div className="filter-menu">
                    <a>胜率</a>
                </div>
                <div className="filter-menu">
                    <a>1v1胜率</a>
                </div>
                <div className="filter-menu">
                    <a>盈利</a>
                </div>
            </div>
        )
        return (
            <QueueAnim
            type={['bottom', 'top']}
            ease={['easeOutQuart', 'easeInOutQuart']}>
                <div className="ani-box flex-col flex-fill" key="a">
                    <div className="pkl-records-head">
                        <Link to="/club">
                            <div className="pkl-records-headimg">
                                <img src={this.state.headImg}/>
                                <span className="username">{this.state.userName}</span>
                                <div className="platform">{this.state.platform}</div>
                            </div>
                        </Link>
                        <div className="pkl-records-statistics">
                            <li>
                                <div className="key">盈利</div>
                                <div className="value">{this.state.userInfo.gains}</div>
                            </li>
                            <li>
                                <div className="key">手数</div>
                                <div className="value">{this.state.userInfo.total}手</div>
                            </li>
                            <li>
                                <div className="key">入池率</div>
                                <div className="value">{(this.state.userInfo.inpoor*100).toFixed(2)}%</div>
                            </li>
                            <li>
                                <div className="progress">
                                    <div className="bar" style={{'width': this.state.userInfo.winningRatio*100 + '%'}}></div>
                                    <span className="text">胜率 {(this.state.userInfo.winningRatio*100).toFixed(2)}%</span>
                                </div>
                            </li>
                        </div>
                        <Link to="/userinfo"><span className="pkl-records-godetail">查看详情 ></span></Link>
                    </div>
                    <div className="pkl-records-history">
                        <div className="pkl-records-line">
                            <Link to="/today"><div className="cell">今日牌谱</div></Link>
                            <Link to="/toprank"><div className="cell">获胜最多/最少</div></Link>
                        </div>
                        <div className="pkl-records-line">
                            <Link to="/history"><div className="cell">历史牌谱</div></Link>
                            <Link to="/opponent"><div className="cell">对手</div></Link>
                        </div>
                    </div>

                </div>
            </QueueAnim>
        )
    }
}
